import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件
Vue.use(Vuex)

// 2. 创建对象
// const store = new Vuex.Store({})

// 3. 导入对象。之后在main.js中挂机即import, 之后再其他页面可以用$store来获取这个对象。
// export default store

// 此处2。 3. 都一起写了
export default new Vuex.Store({
    // state放置属性，类似于实体类
    // 一般可以放用户基本信息，token。及多个页面的公共数据
    state: {
        token: '',
        userInfo: window.JSON.parse(sessionStorage.getItem("userInfo"))
    },
    // set,修改state的值
    mutations: {
        // 默认有个参数state

        /*
        mutations: 里面的方法必须是同步方法
        actions： 里面的方法必须是异步方法

        更新操作：
            vue页面调用方法时，方法体内
                    1. 普通的提交封装
                    this.$store.commit("方法名"，参数)
                    2. 特殊的提交封装，提交的是对象，
                    this.$store.commit({
                        type: mutations定义的方法
                        payload
                    })
            在mutations定义， 方法体内
                    参数为payload,可以是一个参数，一个对象，一个键值对，json
                    1. state.属性名 +
                        state.属性名.payload
                    2. state.属性名.push（参数） |  state.属性名.push（payload）
         */



        // 给token赋值
        SET_TOKEN: (state, token) => {
            state.token = token;
            // token存入localStorage中，反正浏览器关闭后token失效
            localStorage.setItem("token", token)
        },
        SET_USERINFO: (state, userInfo) => {
            state.userInfo = userInfo;
            // token存入localStorage中，反正浏览器关闭后token失效
            sessionStorage.setItem("userInfo", window.JSON.stringify(userInfo))
        },
        // 移除
        REMOVE_INFO: (state) => {
            state.token = '';
            state.userInfo = {};
            // token存入localStorage中，反正浏览器关闭后token失效
            localStorage.setItem("token", '');
            sessionStorage.setItem("userInfo", window.JSON.stringify(''))
        },

    },
    // get
    getters: {

        getUser: state => {
            return state.userInfo
        }
    },
    // 异步操作时使用，
    actions: {
        /*
        actions： 里面的方法必须是异步方法
            默认的参数context: 上下文，可以类似为state
                传递的参数： payload
            方法体内： context.commit('同步里的方法名',)
        异步回调，
            一、
            异步方法名（context,payload）{
                方法（
                context.commit('同步里的方法名')
                payload.message(参数名称)
                payload.success()
                ）

            }
             二、
              异步方法名（context,payload）{
                return new Promise(resolve,reject) =>{
                    方法名(
                        ()=>{
                            context.commit('同步里的方法名')

                            resolve(修改)
                        }
                    )
                }

            }


            vue页面内使用：  this.$store.dispatch('异步里的方法名'，{参数})

            异步回调，
                在异步里改了数据后通知别人，

                实现方案：
                一、
                this.$store.dispatch('同步里的方法名',{
                        message(参数名称): "我是携带的信息",
                        success: ()->{
                            .....
                        }
                })

                二、
                 this.$store.dispatch('同步里的方法名', 参数)
                 .then(res => {
                        .....
                 })


         */

    },


    modules: {
        // 类似于state,把state的东西模块化，
        /*
            默认参数 state getters rootState


        a模块
        // 方式一
        a{
            state: {},
            mutations: {},
            actions: {},
            getters:{}
        }

        // 方式二
        const moduleA = {
            state: {
                name: ''
            },
            mutations: {},
            actions: {
                默认参数 context: 上下文，只调用自己模块的东西，可以拿到rootState，根的东西
            },
            getters:{}
        }
        store中 modules: {
            a: moduleA
        }


        使用store.a

        $store.state.a.属性名

        this.$store.commit('方法名',{参数})





         */

    }

})
